iT邦幫忙

2021 iThome 鐵人賽

DAY 28
1
Software Development

透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計系列 第 28

[第二十八隻羊] 迷霧森林頂尖對決 登入介面套版

  • 分享至 

  • xImage
  •  

天亮了 昨晚是平安夜

關於迷霧森林故事

香水

在場本來許多animal們牽著喜鵲兒的翅膀小手跳舞
都紛紛放下了手 小腳步的移動與他們保持距離
Lulu則是用翅膀摸自己的額頭說 笑死
也不想想你幾兩重 在這邊大小聲
看你這樣欺騙大家的感情我也覺得你很辛苦
不如這樣
如果你兔崽子妳嫩講出任何一個證據證明我是壞人
那你剛就直接說了不用在那邊吱吱嗚嗚還扯什麼我推妳下海
你自己投海我還不知道為什麼你會出現在這呢?

來源
兔兔馬上接著說
兇手不用在那邊情感發言
洛神之所以讓12人的遊戲繼續進行
就算人數只有10個人也不吭聲就是因為
身為神職的技能施予者
她也自帶預言家功能
當你把我們兩個推下海之後
是她開了量子穿隧通道讓我們直接回到舞會現場
況且你根本就瞞不住,洛神也跟我說了你的陰謀
大家只有看看那海馬就知道 你就別演了快點自爆吧
眾animal黑人問號的把頭轉向旋木周遭漂浮的海馬
可愛的海馬在空氣中游動~還不時吐著泡泡 看不出哪裡有可疑之處
Lulu則是臉帶驚訝的說 沒想到洛神還留了這一手
那就沒辦法了
烏雲籠罩在旋木上空
旋木上漂浮的海馬從悠遊自在地飄
海馬身上的金色幻化成金粉
空氣中先是出現了金色的粉狀物 飄在整個森林之中

圖片來源
待續..

動物園派對

今天把登入介面稍微套版也同時再練習一下 tailwind css

<section class="flex max-h-full">
  <main class="w-96 bg-yellow-500 p-7 space-y-5 hidden md:block">
    <header>
      <nav class="p-3">
        <h4 style="font-family: 'montserrat regular';" class="text-xl text-white font-normal uppercase">動物園派對</h4>
      </nav>
    </header>

    <div class="p-3 my7 space-y-6">
      <h1 style="font-family: 'montserrat regular';" class="text-2xl  text-white font-semibold">
        一起趴踢趴踢 all night
      </h1>
      <p class="text-white text-sm" style="font-family: 'inter';">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti iusto nostrum sit placeat reprehenderit
        temporibus, fuga nihil mollitia id culpa?
      </p>
    </div>

    <img src="<%= asset_path("halloween_cute_black_cat.svg")%>", alt="wolf_bg" class="justify-center">
  </main>
  <main class="flex-auto bg-white space-y-7 p-2">
    <header class="py-5 px-5 my-4">
      <nav>
        <ul class="flex items-center justify-end space-x-4">
          <a href="#">
            <li>
              <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
              </svg>
            </li>
          </a>
          <a href="#">
            <li>
              <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
              </svg>
            </li>
          </a>
          <a href="#">
            <li>
              <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
              </svg>
            </li>
          </a>
        </ul>
      </nav>
    </header>

    <div class="flex items-center justify-center p-5">
      <h4 style="font-family: 'montserrat regular';" class="text-3xl font-black text-black">
        帳號登入
      </h4>
    </div>

    <section class="flex flex-col items-center justify-center">
      <%= simple_form_for(resource, as: resource_name, html: { class: 'space-y-4' }, url: session_path(resource_name)) do |f| %>
        <div class="form-inputs text-4xl text-black">
          <div class="email">
            <div class="relative mt-1">
              <div class="input email required user_email bg-white">
                <input autocomplete="email" class="string email required p-4 w-80 h-10 rounded pl-10 text-sm focus:outline-none border border-gray-200 focus:border-red-400 font-light" autofocus="autofocus" required="required" aria-required="true" placeholder="email address" type="email" value="" name="user[email]" id="user_email">
              </div>
              <svg class="w-4 h-4 absolute top-1 ml-8 m-3 text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd"></path>
              </svg>
            </div>
          </div>
          <div class="password">
            <div class="relative mt-1 mb-2">
              <div class="input password required user_password bg-white">
                <input autocomplete="current-password" class="password required p-4 w-80 h-10 rounded pl-10 text-sm focus:outline-none border border-gray-200 focus:border-red-400 font-light" required="required" aria-required="true" type="password" name="user[password]" id="user_password">
              </div>
              <svg class="w-4 h-4 absolute top-1 ml-8 m-3 text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd"></path>
              </svg>
            </div>
          </div>
          <div class="remember_me">
            <div class="relative mt-1 mb-2">
              <div class="input boolean optional user_remember_me bg-white">
                <input value="0" type="hidden" name="user[remember_me]">
                <label class="boolean optional checkbox" for="user_remember_me">
                  <input class="boolean optional mr-3" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">Remember
                me</label></div>
            </div>
          </div>
        </div>

        <div class="form-actions">
          <button class="w-full  focus:ring focus:ring-red-200 w-80 h-9 btn btn-primary" type="submit" name="commit" value="Log in" >進入動物園</button>
        </div>
      <% end %>

    </section>

    <section class="flex flex-col items-center justify-center space-y-4">
    </section>
  </main>
</section>

阿虎每日選幣

$dydx


上一篇
[第二十七隻羊] 迷霧森林舞會XVI 整理客廳,首頁列表介面
下一篇
[第二十九隻羊] 迷霧森林交響樂章 發牌邏輯
系列文
透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
juck30808
iT邦研究生 1 級 ‧ 2021-10-14 12:00:40

寫得好讚,恭喜即將邁入完賽啦!

毛毛 iT邦新手 5 級 ‧ 2021-10-14 23:17:43 檢舉

謝謝 Juck 來訪 受寵若驚
你的 Youtube 也很棒
我最近剛好也有做Youtube相關的應用之後會上線
有機會再來交流
讓我先趕一下文章(遮臉)

juck30808 iT邦研究生 1 級 ‧ 2021-10-15 00:16:16 檢舉

加油加油XD

我要留言

立即登入留言